<template>
    <view class="wrap">
        <view class="tabs">
            <u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#FA230A" @change="change"></u-tabs>
        </view>
        <view class="list-wrap" v-if="list.length > 0">
            <view class="list">
                <view class="item" v-for="(item, index) of list" :key="index">
                    <view class="item-left">
                        <view style="font-size: 30rpx;color: #333;">订单号: {{ item.order_no }}</view>
                        <view style="font-size: 26rpx;color: #888;">冻结时间: {{ item.created_at }}</view>
                        <view style="font-size: 26rpx;color: #888;" v-if="item.status == 1">释放时间: {{ item.updated_at }}</view>
                    </view>
                    <view class="item-right">
                        <view style="font-size: 30rpx;color: #333;">{{ item.amount }}</view>
                        <view style="font-size: 26rpx;color: #888;" v-if="item.status == 0">未到账</view>
                        <view style="font-size: 26rpx;color: #51cf66;" v-else>已到账</view>
                    </view>
                </view>
            </view>
        </view>
        <view style="padding-top: 300rpx;" v-else>
            <u-empty text="暂无记录" mode="list"></u-empty>
        </view>
    </view>
</template>

<script>
    import shareholder from '@/api/shareholder';
    export default {
        data() {
            return {
                tabs: [
                    { name: '全部' },
                    { name: '未到账' },
                    { name: '已到账' }
                ],
                current: 0,
                list: [],
                page: 1,
                loaded: false,
            }
        },
        onLoad() {
            this.getData()
        },
        onReachBottom() {
          if (this.loaded) {
              return;
          }
          this.page++
          this.getData()
        },
        methods: {
            change(index) {
                this.current = index
                this.page = 1;
                this.loaded = false;
                this.list = [];
                this.getData();
            },
            async getData() {
                uni.showLoading({
                	title: '加载中'
                });
                const res = await shareholder.getFugouFrostLog({
                    page: this.page,
                    status: this.current - 1
                });
                uni.hideLoading();
                if (res.data.list.length > 0) {
                    this.list = this.list.concat(res.data.list);
                }
                if (this.list.length == res.data.totalCount) {
                    this.loaded = true;
                }
            }
        }
    }
</script>

<style scoped>
    .wrap {
        min-height: 100vh;
        background-color: #f7f7f7;
    }
    .tabs {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    .list-wrap {
        padding: 100rpx 20rpx 20rpx 20rpx;
    }
    .list {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 0 20rpx;
    }
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #fafafa;
    }
    .item:last-child {
        border-bottom: none;
    }
</style>